<template>
    <div>
      <Header></Header>
      <!--main开始-->
      <div class="mainBox w1200 bc mt20 clearfix">
        <userSideMenu :flag="'help'"></userSideMenu>
        <div class="mainRight fr w930">
          <div class="br2 bg100 pb60">
            <!--title-->
            <h1 class="h60 bb90  c60 clearfix ">
              <a :class="(tagIndex===0)?'ml30 fl h60 f18 fm-yahei c60 lh60  hoverborder_grn_bottom curborder_grn_bottom':'ml30 fl h60 f18 fm-yahei c60 lh60  hoverborder_grn_bottom' " href="javascript:void(0);" @click="getCreate">我创建的</a>
              <a :class="(tagIndex===1)?'fl h60 f18 fm-yahei  lh60 c60 ml120 hoverborder_grn_bottom curborder_grn_bottom':'fl h60 f18 fm-yahei  lh60 c60 ml120 hoverborder_grn_bottom'" href="javascript:void(0);" @click="getJoin">我参与的</a>
            </h1>
            <!--list-->
            <ul class="w880 pl25 pr25  fm-yahei letter1 pointer c7 f16 fm-yahei">
              <li class="pt20 pb20 bb90 clearfix" v-for = "item in helpList">
                <img class="fl br2 w100 h100 mr25" :src="item['imgUrl']+'?x-oss-process=image/resize,m_fill,h_100,w_100'" width="100" height="100" alt="" style="border-radius:50px;" />
                <dl class="fl lh30 mt20">
                  <dt class="f18 c0">{{item['nickName']}}</dt>
                  <dd class="c60 f14 w630">{{limitWord(item['Summary'],100,'...')}}</dd>
                </dl>
                <div class="fr f14  mt15">
                  <span class="  block  w100 tc  bg_grn_119c5b c100 h28 lh28 br2 mb15 " v-if="item['status']===0">进行中</span>
                  <span class="  block  w100 tc  bg_org_e0613a c100 h28 lh28 br2 mb15 " v-if="item['status']===1">已结束</span>
                  <a href="javascript:void (0);" class="block  w100 tc  bg_grn_119c5b c100  h28 lh28 br2  hoverfont_unl" @click="lookHelpInfo(item['helpID'])">查看详情</a>
                </div>
              </li>
              <li class="tc c60 f12 lh60 mt20">
                <a class="c60 hoverfont_unl" href="javascript:void(0);" @click = "getMore" ref="infoListBox">点击查看更多></a>
              </li>
            </ul>
          </div>
        </div><!--mainRight结束-->
      </div>
      <Footer></Footer>
      <loading v-show="loadState"></loading>
      <div id="helpInfoBox" v-show="helpInfoState">
          <div id="helpInfoCon">
              <div id="Con">
                <p class="InfoTit">
                  救援详情
                  <i @click="closeInfoBox">×</i>
                </p>
                <div class="InfoBox">
                  <div class="Map fl" id="MapCon">

                  </div>
                  <div class="InfoList fr" v-if="helpInfo!=null">
                      <ul>
                        <li>
                          <span class="InfoIconTxt">
                            求救人:
                          </span>
                          <p class="InfoMsg">
                            {{helpInfo['userName']}}
                          </p>
                        </li>
                        <li>
                          <span class="InfoIconTxt">
                            所在区域:
                          </span>
                          <p class="InfoMsg">
                            {{helpInfo['areaName']}}
                          </p>
                        </li>
                        <li>
                          <span class="InfoIconTxt">
                            救援地址:
                          </span>
                          <p class="InfoMsg">
                            {{helpInfo['address']}}
                          </p>
                        </li>
                        <li>
                          <span class="InfoIconTxt">
                            联系方式:
                          </span>
                          <p class="InfoMsg">
                            {{helpInfo['mobile']}}
                          </p>
                        </li>
                        <li>
                          <span class="InfoIconTxt">
                            求救原因:
                          </span>
                          <p class="InfoMsg">
                            {{helpInfo['content']}}
                          </p>
                        </li>
                        <li>
                          <span class="InfoIconTxt">
                            求救说明:
                          </span>
                          <p class="InfoMsg">
                            {{helpInfo['summary']}}
                          </p>
                        </li>
                        <li v-show="helpInfo['listResource'].length!=0">
                          <el-carousel height="150px" :interval="4000" type="card">
                            <el-carousel-item v-for="(item,index) in helpInfo['listResource']" :key="index">
                              <img :src="item['flag']===1?item['fileName']+'?x-oss-process=image/resize,m_fill,h_300,w_480':item['thumFileName']+'?x-oss-process=image/resize,m_fill,h_150,w_500'" alt="">
                              <p class="playBtn" v-if="item['flag']===2"></p>
                            </el-carousel-item>
                          </el-carousel>
                        </li>
                      </ul>
                  </div>
                </div>
              </div>
          </div>
      </div>
    </div>
</template>

<script>
  import Header from "../../components/header";
  import Footer from "../../components/footer";
  import userSideMenu from "../../components/usersidemenu";
  import Utils from "../../assets/Util";
  import loading from "../../components/loading";
  export default {
    name: 'historyHelp',
    components:{
      Header,
      Footer,
      userSideMenu,
      loading
    },
    data(){
      return {
        loadState:true,
        tagIndex:0,
        helpList:[],
        helpInfoState:false,
        helpInfo:null,
        getHelpData:{
          "type": 1,
          "userID": localStorage.getItem("uId"),
          "pageIndex": 0,
          "pageSize": 15
        }
      }
    },
    mounted(){
      if (!Utils.isLogin){
        this.$router.push({path:'/'})
      }
      this.getHelps();
    },
    methods:{
      // 请求救援信息
      getHelps(){
        this.getHelpData.userID = localStorage.getItem("uId");
        let props = {
          url:'/Help/GetList',
          data:this.getHelpData,
          sCallBack:res => {
            this.loadState = false;
            if(res.data.code === 1){
                if (res.data.data.length === 0){
                  if (this.getHelpData.pageIndex === 0){
                    this.$refs.infoListBox.innerText = "暂无数据"
                    return false;
                  }
                  this.$message.success("信息加载完毕");
                  return false;
                }else{
                  this.$refs.infoListBox.innerText = "点击加载更多"
                }
                this.helpList = this.helpList.concat(res.data.data);
            }else{
              this.$message.error("救援信息请求出错");
            }
          },
          eCallBack:err => {
            this.$message.error("救援信息请求失败");
            console.log(err);
          }
        }
        Utils.myRequest(props);
      },
      // 请求更多
      getMore(){
        this.loadState = true;
        this.getHelpData.pageIndex += 1;
        this.getHelps();
      },
      // 请求我创建的
      getCreate(){
        this.tagIndex = 0;
        this.loadState = true;
        this.helpList = [];
        this.getHelpData.pageIndex = 0;
        this.getHelpData.type = 1;
        this.getHelps();
      },
      // 请求我加入的
      getJoin(){
        this.tagIndex = 1;
        this.loadState = true;
        this.helpList = [];
        this.getHelpData.pageIndex = 0;
        this.getHelpData.type = 2;
        this.getHelps();
      },
      // 查看救援详情
      lookHelpInfo(id){
        let props = {
          url:'/Help/GetDetails',
          data:{
            "id": id,
            "userID": localStorage.getItem('uId')
          },
          sCallBack:res => {
            if (res.data.code === 1){
              this.helpInfo = res.data.data
              this.initMap(this.helpInfo['lng'], this.helpInfo['lat'])
              this.helpInfoState = true;
            }else{
              this.$message.error("请求救援详情出错");
            }
          },
          eCallBack:err => {
            this.$message.error("救援详情请求失败");
            console.log(err);
          }
        }
        Utils.myRequest(props);
      },
      closeInfoBox(){
        this.helpInfoState = false;
      },
      // 实例化地图
      initMap(lng, lat){
        let map = new AMap.Map('MapCon', {
          resizeEnable: true,
          center: [lng, lat],
          zoom: 18
        });
        AMap.plugin('AMap.Geolocation', function() {
          var geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,
            timeout: 10000,
            buttonPosition:'RB',
            buttonOffset: new AMap.Pixel(10, 20),
            zoomToAccuracy: false
          });
          map.addControl(geolocation);
          // geolocation.getCurrentPosition(function(status, result){});
        });
        let helpIcon = new AMap.Icon({
          size: new AMap.Size(25, 41),
          image: 'static/images/map_local_current.png',
          imageSize: new AMap.Size(18, 41),
          imageOffset: new AMap.Pixel(0, 0)
        });
        let helpMarker = new AMap.Marker({
          position: new AMap.LngLat(lng, lat),
          icon: helpIcon,
          offset: new AMap.Pixel(-13, -30)
        });
        map.add(helpMarker);
      },
      // 限制字数
      limitWord(words, wordsLength, mark){
          return Utils.limitworld(words, wordsLength, mark);
      }
    }
  }
</script>

<style scoped>
#helpInfoBox{
  width:100vw;
  height:100vh;
  background:rgba(0,0,0,0.4);
  position:fixed;
  top:0px;
  left:0px;
}
#helpInfoCon{
  width:880px;
  height:490px;
  background:rgba(255,255,255,0.6);
  padding:10px;
  border-radius:4px;
  position: absolute;
  top:50%;
  left: 50%;
  margin-top:-245px;
  margin-left:-440px;
}
  #Con{
    width:100%;
    height:100%;
    background: #fff;
  }
  #Con .InfoTit{
    width:100%;
    line-height: 45px;
    color:#fff;
    font-size:16px;
    text-indent:20px;
    background: #119C5B;
  }
#Con .InfoTit i{
  display: inline-block;
  width:45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  float: right;
  margin-right:5px;
  cursor: pointer;
}
  #Con .Map{
    width:380px;
    height:445px;
    background: #2c3e50;
  }
  #Con .InfoList{
    width:500px;
    height: 445px;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  .InfoList ul li{
    line-height: 45px;
    border-bottom: 1px solid #e0e3e9;
    font-size: 14px;
  }
.InfoList ul li:last-child{
  border:none;
  padding-top:20px;
  background:#eee;
}
.InfoList ul li span{
  display: inline-block;
  width:80px;
  text-align: right;
}
.InfoList ul li p{
  display: inline-block;
  width:365px;
  padding:0px 15px;
  vertical-align: top;
  text-align: justify;
}
</style>
